Vue |
您所在的位置:网站首页 › vue 修改路由参数 › Vue |
Vue 2.0 路由传递参数html Vue 路由传递参数 有两种方式:vue 1、用name传递参数
两步完成用name传值并显示在模板里:git 在路由文件src/router/index.js里配置name属性。 1 2 3 4 5 6 7 routes: [ { path: '/', name: 'Hello', component: Hello } ] 模板里(src/App.vue)用$router.name的形势接收,好比直接在模板中显示: 1{{ $route.name}}
2、经过 标签中的to传参
上边的传参或许很不正规,也不方便,其实工做中多数传参是不用name进行传参的,咱们用标签中的to属性进行传参,须要注意的是这里的to要进行一个绑定,写成:to。先来看一下这种传参方法的基本语法:github 1 valueString这里的to前边是带冒号的,而后后边跟的是一个对象形势的字符串.web name:就是咱们在路由配置文件中起的name值。 params:就是咱们要传的参数,它也是对象形势,在对象里能够传递多个值。了解基本的语法后,咱们改造一下咱们的src/App.vue里的标签,咱们把hi1页面的进行修改。正则表达式 1 Hi页面1把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.vue-router 1 {path:'/hi1',name:'hi1',component:Hi1},最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.jsp 1 {{$route.params.username}} vue-router 利用url传递参数 :冒号的形式传递参数在路由配置文件里以:冒号的形式传递参数,这就是对参数的绑定。post 在配置文件里以冒号的形式设置参数。咱们在/src/router/index.js文件里配置路由。 1 2 3 4 { path:'/params/:newsId/:newsTitle', component:Params } 咱们须要传递参数是新闻ID(newsId)和新闻标题(newsTitle).因此咱们在路由配置文件里制定了这两个值。 在src/components目录下创建咱们params.vue组件,也能够说是页面。咱们在页面里输出了url传递的的新闻ID和新闻标题。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 {{ msg }}新闻ID:{{ $route.params.newsId}} 新闻标题:{{ $route.params.newsTitle}} export default { name: 'params', data () { return { msg: 'params page' } } }在App.vue文件里加入咱们的标签。这时候咱们能够直接利用url传值了。 1 params | 正则表达式在URL传值中的应用 上边的例子,咱们传递了新闻编号,如今需求升级了,咱们但愿咱们传递的新闻ID只能是数字的形式,这时候咱们就须要在传递时有个基本的类型判断,vue是支持正则的。url 加入正则须要在路由配置文件里(/src/router/index.js)以圆括号的形式加入。 1 path:'/params/:newsId(\\d+)/:newsTitle',加入了正则,咱们再传递数字以外的其余参数,params.vue组件就没有办法接收到。
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |